<template>
  <el-card style="margin-top: 20px;">
    <el-table :data="table.tableData">
      <el-table-column
        v-for="(val, key) in table.tableLabel"
        :key="key"
        :prop="key"
        :label="val"
      ></el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px;"
      :current-page="table.page"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="table.total"
    />
  </el-card>
</template>
<script>
import axios from 'axios';
export default {
  name: 'MallManage',
  data () {
    return {
      LOCALURL: 'http://localhost:8888',
      table: {
        page: 1,
        total: 20,
        size: 10,
        tableLabel: {
          projectId: '员工编号',
          staffName: '姓名',
          workSituation: '工作完成情况',
          workEfficiency: '工作效率',
          developmentPotential: '发展潜力',
          communicateAbility: '交流能力',
          attendance: '考勤情况',
          finalPerformance: '最终绩效等级'
        },
        tableData: [],
      },
    }
  },
  methods: {
    handleCurrentChange (val) {
      //   console.log(`当前页: ${val}`);
      this.table.page = val;    //动态改变
      this.getData(val, this.table.size)

    },
    getData (current, size) {
      axios({
        method: 'post',
        url: this.LOCALURL + '/performance/queryPerformance',
        data: {
          current,
          size
        }
      }).then((res) => {
        this.table.tableData = res.data.records;
        this.table.total = res.data.total;
        this.table.page = res.data.current;
      })
    }
  },
  mounted () {
    this.getData(1, this.table.size)
  },
}

</script>
<style scoped>
.el-pagination {
  text-align: center;
}
</style>